<template>
  <view>
    <!-- 搜索栏 -->
    <uni-search-bar @confirm="searchCourse" cancelButton="none" v-model="query" @clear="clear" />
    <!-- 主体部分 -->
    <view class="main">
      <!-- 分类 -->
      <uni-grid :column="1" :square="false" class="category_list" @change="selectSubject">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
          <uni-grid-item index="all"> <text class="text">全部</text></uni-grid-item>
          <uni-grid-item v-for="item in subjectList" :key="item.id" :index="item.id">
            <text class="text">{{ item.name }}</text>
          </uni-grid-item>
        </scroll-view>
      </uni-grid>
      <!-- 课程列表 -->
      <uni-grid :column="1" :square="false" class="course_list">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
          <uni-grid-item v-for="item in courseList" :key="item.id" :index="item.id">
            <uni-card :title="item.name" :thumbnail="getImage(item.posters)" :extra="`共${item.number}节`">
              <view class="uni-body uni-mt-5">课程简介:{{ getDescription(item.description) }}</view>
              <view class="card-actions-item">
                <button size="mini" type="primary" hover-class="is-hover" class="course_btn" @click="openCourse(item.id)">开始学习</button>
              </view>
            </uni-card>
          </uni-grid-item>
          <uni-load-more :status="status" :content-text="statusText" @clickLoadMore="clickLoadMore" />
        </scroll-view>
      </uni-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //科目列表
      subjectList: [],
      //课程列表
      courseList: [],
      //课程查询表单
      courseForm: {
        current: 1,
        size: 10,
      },
      status: 'more',
      total: 0,
      statusText: { contentdown: '点击加载更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' },
      query: '',
    }
  },
  onLoad(options) {
    this.getSubjectList()
    this.getCourseList(undefined)
  },
  methods: {
    // 获取分类列表
    getSubjectList() {
      this.$store.dispatch('subject/lookSubjectAll', {}).then((response) => {
        this.subjectList = response
      })
    },
    //选择科目时
    selectSubject(v) {
      var index = v.detail.index
      this.getCourseList(index == 'all' ? undefined : index)
    },
    //获取课程列表
    getCourseList(id) {
      var courseForm = this.courseForm
      courseForm.subjectId = undefined
      if (id != undefined) {
        courseForm.subjectId = id
      }
      this.courseForm.current = 1
      this.status = 'more'
      this.$store.dispatch('course/lookCourse', courseForm).then((response) => {
        if (response.success) {
          this.courseList = response.data
          this.total = response.other.pageSize
        }
      })
    },
    getImage(id) {
      return `${process.env.VUE_APP_ORIGIN_API}fileService/file/download?id=${id}`
    },
    clickLoadMore(e) {
      if (this.courseForm.current * this.courseForm.size >= this.total) {
        this.status = 'noMore'
        return
      }
      this.status = 'loading'
      this.courseForm.current++
      this.$store.dispatch('course/lookCourse', this.courseForm).then((response) => {
        if (response.success) {
          this.courseList = [...this.courseList, ...response.data]
          this.total = response.other.pageSize
        }
      })
      this.status = 'more'
    },
    // 截取课程描述
    getDescription(v) {
      return v != undefined && v.length > 40 ? v.substring(0, 40) + '...' : v
    },
    //搜索课程
    searchCourse(v) {
      this.courseForm.current = 1
      this.courseForm.name = v.value
      this.getCourseList(undefined)
    },
    //开始学习
    openCourse(id) {
      uni.navigateTo({
        url: `./study?id=${id}`,
      })
    },
    clear() {
      this.query = ''
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep.main {
  height: 1100rpx;
  .category_list {
    // border: 1rpx solid #000;
    height: 100%;
    width: 19%;
    float: left;
    // margin: 1rpx;
    .uni-grid .uni-scroll-view {
      height: 1100rpx !important;
      // border: 1px red solid;
      .uni-grid-item {
        text-align: center;
        height: 8%;
        // border: 1px red solid;
      }
      .uni-grid-item:hover {
        background-color: #ccc;
      }
    }
  }
  .course_list {
    height: 100%;
    width: 80%;
    // border: 1rpx solid #000;
    float: left;
    .uni-grid-item {
      width: 20%;
      height: 40%;
      // border: 1px red solid;
    }
    .uni-scroll-view {
      width: 550rpx !important;
      height: 1100rpx !important;
    }
    .uni-card {
      height: 600rpx !important;
      .uni-body {
        height: 150rpx !important;
      }
      .course_btn {
        margin-right: 0;
        width: 30%;
        font-size: 20rpx;
        float: right;
      }
    }
  }
}
</style>
